<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-22 09:25
 * Desc: invalidCoupon 商家无效券
 */
-->
<template>
  <view class="invalid-coupon">
    <yy-list :list="listData" :loading="listLoading" :finished="listFinished" empty-type="history">
      <view class="invalid-coupon__coupon-box">
        <coupon-box v-for="item in listData" :key="item.id" @click.native="toVerificationDetail(item)">
          <view slot="left" class="invalid-coupon__coupon-main mb25">
            <template v-if="item.cardType == 1">
              <gc-cell label="核销时间" label-width="120rpx" :value="item.verificationTime" />
              <gc-cell label="订单号" label-width="120rpx" :value="item.orderNo" />
              <gc-cell label="手机号" label-width="120rpx" :value="item.mobile" />
            </template>
            <template v-if="item.cardType == 2">
              <view class="fs30 black mb5 b">{{ item.name }}</view>
              <gc-cell label="券码" label-width="120rpx" :value="item.code" />
              <gc-cell label="有效期" label-width="120rpx" :value="item.expireTime" />
              <gc-cell label="过期时间" label-width="120rpx" :value="item.endTime" />
            </template>
          </view>
          <view
            slot="right"
            class="invalid-coupon__coupon-status"
            :class="item.cardType == 1 ? 'invalid-coupon__coupon-status--verification' : 'invalid-coupon__coupon-status--overdue'"
          ></view>
        </coupon-box>
      </view>
    </yy-list>
    <!-- <check-film-coupon
      url="/pagesOrder/merchantsCoupon/index"
    ></check-film-coupon> -->
    <zm-popup></zm-popup>
  </view>
</template>
<script>
  import CouponBox from '@/pagesOrder/components/CouponBox/index.vue'
  // import CheckFilmCoupon from '@/components/CheckFilmCoupon/index.vue'
  import GcCell from '@/pagesOrder/verification/components/GcCell.vue'
  import listMixins from '@/mixins/listMixins'
  import { deDupArray } from '@/utils'
  import ZmPopup from '@/commons/ZmPopup'
  export default {
    name: 'invalid-coupon',
    components: { CouponBox, ZmPopup, GcCell },
    mixins: [listMixins],
    data() {
      return {
        hasSelect: ''
      }
    },
    onShow() {
      this.listLoad()
    },
    computed: {},
    methods: {
      onloadList() {
        const query = {
          ...this.search,
          ...this.pageInfo
        }
        return uni.$api.coupon.getHistoryMerchandiseCouponList(query).then((res) => {
          if (this.isLoading) {
            // 是下啦刷新 清空
            this.listData = []
          }
          if (!this.listData) {
            this.listData = []
          }
          //服务端数据为二维数组 前端展示为一维数组 测试说之前可以展示（先改为一维数组）
          res.list.forEach((element) => {
            element.couponData.forEach((item) => {
              this.listData.push(item)
            })
          })
          // const listData = [...this.listData, ...res.list]

          // console.log('listData', listData)
          this.listData = deDupArray(this.listData, 'id')
          console.log('listData', this.listData)
          return res
        })
      },
      onPullDownRefresh() {
        this.listRefresh()
      },
      onReachBottom() {
        this.listLoad()
      },
      toVerificationDetail(val) {
        console.log(val)
        if (+val.cardType === 1) {
          this.$tools.navigateTo('/pagesOrder/verification/index', {
            id: val.id,
            fromPage: 'history'
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .invalid-coupon {
    padding-top: 20rpx;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 100vh;
    background: #f3f5f7;
    color: #919191;
    padding-bottom: 250rpx;
    &__filter {
      display: flex;
      align-items: center;
      background: #fff;
    }
    &__sel {
      flex: 1;
    }
    &__scan {
      width: 60rpx;
      height: 60rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/icon-scan.png) no-repeat;
      background-size: 100%;
    }
    &__name {
      padding: 37rpx 31rpx 27rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
    }
    &__nopadding {
      padding-top: 17rpx;
    }
    &__coupon-box {
      width: 100%;
      padding: 0 20rpx;
    }
    &__coupon-main {
      line-height: 1.6;
      margin-top: 25rpx;
      margin-left: 29rpx;
      font-size: 24rpx;
      color: #919191;
    }
    &__coupon-money {
      margin: 35rpx 0 25rpx 0;
      font-size: 34rpx;
      font-weight: 600;
      color: #333333;
    }
    &__coupon-status {
      width: 100%;
      height: 100%;
      transform: scale(0.5);
    }
    &__coupon-status--used {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-used.png) no-repeat;
      background-size: 100%;
    }
    &__coupon-status--invalid {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-invalid.png) no-repeat;
      background-size: 100%;
    }
    &__coupon-status--overdue {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-overdue.png) no-repeat;
      background-size: 100%;
    }
    &__coupon-status--verification {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-verification.png) no-repeat;
      background-size: 100%;
    }
    &__coupon-status--freeze {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-freeze.png) no-repeat;
      background-size: 100%;
    }
  }
</style>
